<template>
  <div class="page" style="">
    <div class="print_title">车辆维修申请详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.documentNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.handlerId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applyDept_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >经营团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.managementTeam_dictText?formData.managementTeam_dictText:formData.managementTeam }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >车牌号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.carId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >修报类型:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.repairReportType_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >维修厂:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.repairShop }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >当前里程数(km):</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.carKilometers }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >保险到期时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.insuranceEndTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >维修情况说明:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.faultCause }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <a-row type="flex" justify="center" style="margin-top: 18px;" v-if="dataSource && dataSource.length">
      <a-col>
        <p class="title_table">维修明细</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="dataSource"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>
    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  export default {
    props: {
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        dataSource: [], // 物料列表
        columns: [
          {
              title: '序号',
              dataIndex: '',
              key: 'rowIndex',
              width: 45,
              align: 'center',
              customRender: function (t, r, index) {
                  return parseInt(index) + 1;
              }
          },
          {
              title: '故障',
              align: 'center',
              // width: 65,
              dataIndex: 'fault'
          },
          {
              title: '维修项目',
              align: 'center',
              // width: 65,
              dataIndex: 'maintenanceItems'
          },
          {
              title: '维修金额(元)',
              align: 'center',
              width: 85,
              dataIndex: 'maintenanceMoney'
          },
          {
              title: '备注',
              align: 'center',
              // width: 65,
              dataIndex: 'remark'
          }
        ],
        dataHistorySource: [], // 流程列表
        url: {
            list: '/api/erp/erpcarmaintenancedetails/erpCarMaintenanceDetails/list', // 维修明细列表
            historyList: '/api/erpmng/act/task/processHistoryList' // 流程历史跟踪接口
        },
        purchaseFile: [] // 附件
      };
    },
      watch: {
          formData: {
              handler (val) {
                  if (val) {
                      this.list()
                      this.getHistoryList()
                      if (val.fileInfo) {
                          this.purchaseFile = val.fileInfo.split(',')
                      }
                  }
              },
              immediate: true
          },
          formDataHistory: {
              handler (val) {
                  if (val) {
                      this.getHistoryList()
                  }
              },
              immediate: true
          }
      },
      methods: {
          // 获取列表
          getHistoryList() {
              var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
              getAction(this.url.historyList, params).then(res => {
                  if (res.success) {
                      this.dataHistorySource = res.result.records || res.result
                  }
              })
          },

          list () {
              if (!this.formData.id) {
                  return false
              }
              var params = {
								maintenanceId: this.formData.id,
								pageNo: 1,
								pageSize: 100
              }
              getAction(this.url.list, params).then(res => {
								if (res.success) {
									this.dataSource = res.result.records || res.result
									this.dataSource.forEach((item, index) => {
										item.key = index
									})
								}
        		})
          },

          tableRowClass(record, index) {
              console.log('record, index', record, index)
              if (index == 0) {
                  return 'rowClass';
              }
        return ''
      }
      }
  };
</script>
  <style lang="less" scoped>
  .page{
      background: #ffffff;
      padding: 19px 28px 0 28px;
      width: 750px;
      .print_title{
          font-size: 15px;
          font-family: Alibaba PuHuiTi 2.0;
          font-weight: normal;
          color: #000000;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 9px;
      }
      .title {
          background: #EEEEEE;
          font-size: 13px;
          font-family: Alibaba PuHuiTi 2.0;
          font-weight: normal;
          color: #000000;
          padding: 11px 9px;
      }
      .content {
          font-size: 13px;
      }

      .title_table{
          font-size: 13px;
          font-family: Alibaba PuHuiTi 2.0;
          font-weight: normal;
          color: #000000;
      }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }

  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
  .content{
    font-size: 13px;
  }
  </style>
